<template>
  <el-row :gutter="20">
    <!-- 第一个小方块 -->
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日销售额
        </template>
        <template #chart-number>
          {{chartData.salesToday}}
        </template>
        <template #chart-footer>
          昨日销售额:{{chartData.salesLastDay}}
        </template>
        <template #chart-charts>
          <div>日同比:{{chartData.salesGrowthLastDay}} <svg t="1664422343597" class="icon" viewBox="0 0 1427 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5140" width="12" height="12">
              <path
                d="M275.821156 67.001091h161.919302C455.607415 67.001091 469.007634 81.517993 469.007634 98.268266v902.281352H244.55398V98.268266c0-16.750273 14.516903-31.267176 31.267176-31.267175z"
                fill="#d81e06" p-id="5141"></path>
              <path
                d="M492.458015 1024H222.220284V98.268266c0-30.150491 24.567067-53.600872 53.600872-53.600872h161.919302C467.890949 44.667394 491.34133 69.23446 491.34133 98.268266v925.731734z m-225.570338-44.667394h180.902945V98.268266c0-5.583424-4.466739-8.933479-8.933479-8.933479H275.821156c-5.583424 0-8.933479 4.466739-8.933479 8.933479v881.06434z"
                fill="#d81e06" p-id="5142"></path>
              <path
                d="M635.393675 292.571429h170.852781c15.633588 0 26.800436 12.283533 26.800436 27.917121v681.177753H607.476554v-681.177753c0-15.633588 12.283533-27.917121 27.917121-27.917121z"
                fill="#d81e06" p-id="5143"></path>
              <path
                d="M855.380589 1022.883315H585.142857v-703.51145c0-27.917121 22.333697-50.250818 50.250818-50.250818h170.852781c27.917121 0 50.250818 22.333697 50.250818 50.250818v703.51145z m-225.570338-44.667394h180.902944v-658.844056c0-2.23337-2.23337-5.583424-5.583424-5.583424H635.393675c-2.23337 0-5.583424 2.23337-5.583424 5.583424v658.844056z"
                fill="#d81e06" p-id="5144"></path>
              <path
                d="M989.38277 513.675027h179.786259c12.283533 0 22.333697 10.050164 22.333697 22.333697v465.657579H967.049073V536.008724c0-12.283533 10.050164-22.333697 22.333697-22.333697z"
                fill="#d81e06" p-id="5145"></path>
              <path
                d="M1213.836423 1024H944.715376V536.008724c0-24.567067 20.100327-44.667394 44.667394-44.667394h179.786259c24.567067 0 44.667394 20.100327 44.667394 44.667394v487.991276z m-224.453653-44.667394h179.786259V536.008724H988.266085l1.116685 443.323882z"
                fill="#d81e06" p-id="5146"></path>
              <path
                d="M1404.789531 1024H22.333697c-12.283533 0-22.333697-10.050164-22.333697-22.333697s10.050164-22.333697 22.333697-22.333697h1382.455834c12.283533 0 22.333697 10.050164 22.333697 22.333697s-10.050164 22.333697-22.333697 22.333697zM1155.768811 303.738277c-5.583424 0-11.166848-2.23337-15.633587-6.700109L879.947655 37.967285c-8.933479-8.933479-8.933479-22.333697 0-31.267176 8.933479-8.933479 22.333697-8.933479 31.267176 0l259.070883 259.070883c8.933479 8.933479 8.933479 22.333697 0 31.267176-3.350055 4.466739-8.933479 6.700109-14.516903 6.700109z"
                fill="#d81e06" p-id="5147"></path>
              <path
                d="M1182.569248 314.905125H1011.716467c-12.283533 0-22.333697-10.050164-22.333697-22.333696s10.050164-22.333697 22.333697-22.333697h126.185387V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v170.85278z"
                fill="#d81e06" p-id="5148"></path>
              <path
                d="M1055.267176 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V589.609597c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333696 22.333697v412.056706c0 12.283533-10.050164 22.333697-22.333696 22.333697z"
                fill="#d81e06" p-id="5149"></path>
              <path
                d="M697.928026 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697v-636.51036c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v635.393675c0 13.400218-10.050164 23.450382-22.333697 23.450382z"
                fill="#d81e06" p-id="5150"></path>
              <path
                d="M340.588877 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v857.613958c0 12.283533-10.050164 22.333697-22.333697 22.333697z"
                fill="#d81e06" p-id="5151"></path>
            </svg></div>
          <div>月同比:{{chartData.salesGrowthLastMonth}}<svg t="1664422426095" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6594" width="12" height="12">
              <path
                d="M987.043172 1000.472648H760.73245V95.229759c0-17.925602 14.564551-31.369803 31.369803-31.369803H954.553019c17.925602 0 31.369803 14.564551 31.369803 31.369803l1.12035 905.242889z"
                fill="#1afa29" p-id="6595"></path>
              <path
                d="M1009.450174 1022.87965H738.325447V95.229759c0-14.564551 5.601751-28.008753 15.684902-38.091903 10.083151-10.083151 23.527352-15.684902 38.091904-15.684902H954.553019c30.249453 0 53.776805 24.647702 53.776805 53.776805v927.649891z m-226.310722-44.814004h181.496718V95.229759c0-5.601751-4.4814-8.962801-8.962801-8.962801H793.222603c-3.36105 0-5.601751 1.12035-6.722101 2.240701-1.12035 1.12035-2.2407 3.36105-2.2407 6.7221v882.835887z"
                fill="#1afa29" p-id="6596"></path>
              <path
                d="M621.809036 1001.592998H396.618664v-683.413567c0-15.684902 12.323851-26.888403 28.008753-26.888403H596.040984c15.684902 0 28.008753 12.323851 28.008752 26.888403-2.2407 0-2.2407 683.413567-2.2407 683.413567z"
                fill="#1afa29" p-id="6597"></path>
              <path
                d="M644.216038 1024H374.211662v-705.820569c0-28.008753 22.407002-49.295405 50.415755-49.295405H596.040984c28.008753 0 50.415755 22.407002 50.415754 49.295405v705.820569z m-225.190372-44.814004h181.496718v-661.006565c0-2.2407-2.2407-4.4814-5.601751-4.4814H423.507067c-2.2407 0-5.601751 2.2407-5.601751 4.4814v661.006565z"
                fill="#1afa29" p-id="6598"></path>
              <path
                d="M262.176651 1000.472648H35.865929V534.407002c0-12.323851 10.083151-22.407002 22.407002-22.407002h181.496718c12.323851 0 22.407002 10.083151 22.407002 22.407002v466.065646z"
                fill="#1afa29" p-id="6599"></path>
              <path
                d="M284.583653 1022.87965H13.458927V534.407002c0-24.647702 20.166302-44.814004 44.814004-44.814004h181.496718c24.647702 0 44.814004 20.166302 44.814004 44.814004v488.472648zM58.272931 978.065646h181.496718V534.407002H58.272931v443.658644z"
                fill="#1afa29" p-id="6600"></path>
              <path
                d="M173.668992 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V587.063457c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v413.409191c0 13.444201-10.083151 22.407002-22.407002 22.407002zM532.181027 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V362.993435c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v637.479213c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
                fill="#1afa29" p-id="6601"></path>
              <path
                d="M890.693062 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V140.043764c0-12.323851 10.083151-22.407002 22.407002-22.407003s22.407002 10.083151 22.407002 22.407003v860.428884c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
                fill="#1afa29" p-id="6602"></path>
              <path
                d="M309.231355 182.617068c-12.323851 0-22.407002-10.083151-22.407002-22.407002V44.814004H170.307942c-12.323851 0-22.407002-10.083151-22.407002-22.407002s10.083151-22.407002 22.407002-22.407002h160.210066v160.210066c1.12035 12.323851-8.962801 22.407002-21.286653 22.407002z"
                fill="#1afa29" p-id="6603"></path>
              <path
                d="M35.865929 320.420131c-5.601751 0-11.203501-2.2407-15.684902-6.7221-8.962801-8.962801-8.962801-22.407002 0-31.369803L293.546454 7.842451c8.962801-8.962801 22.407002-8.962801 31.369803 0 8.962801 8.962801 8.962801 22.407002 0 31.369803L51.55083 313.698031c-4.4814 4.4814-10.083151 6.722101-15.684901 6.7221z"
                fill="#1afa29" p-id="6604"></path>
            </svg></div>
        </template>
      </chart-card>
    </el-col>

    <!-- 第二个小方块 -->
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日订单
        </template>

        <template #chart-number>
          {{chartData.orderToday}}
        </template>

        <template #chart-footer>
          昨日订单量:{{chartData.orderLastDay}}
        </template>

        <template #chart-charts>
          <v-chart :option="getLineChart()"></v-chart>
        </template>
      </chart-card>
    </el-col>

    <!-- 第三个小方块 -->
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          今日交易用户
        </template>

        <template #chart-number>
          {{chartData.orderUser}}
        </template>

        <template #chart-footer>
          昨日订单量:{{chartData.returnRate}}
        </template>

        <template #chart-charts>
          <v-chart :option="getOrderUserTrend()"></v-chart>
        </template>
      </chart-card>
    </el-col>

    <!-- 第四个小方块 -->
    <el-col :span="6">
      <chart-card>
        <template #chart-title>
          累积用户
        </template>

        <template #chart-number>
          {{chartData.usersTotal}}
        </template>

        <template #chart-footer>
          日同比{{chartData.userGrowthLastDay}}<svg t="1664456418725" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2536" width="10" height="10">
            <path d="M960 704L512 256l-448 448z" fill="#d4237a" p-id="2537"></path>
          </svg> 月同比{{chartData.userGrowthLastMonth}}
          <svg t="1664456477504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9003" width="10" height="10">
            <path d="M0 0l512 614.4L1024 0H0z" p-id="9004" fill="#1afa29"></path>
          </svg>
        </template>

        <template #chart-charts>
          <v-chart :option="getChart()"></v-chart>
        </template>
      </chart-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
//引入自己封装的卡片组件
import ChartCard from "./ChartCard/index.vue";
import { watch, ref } from 'vue'

let prop = defineProps(['chartData'])



let arrData = ref([])
let orderUserTrend = ref([])
watch(() => prop.chartData, () => {
  arrData.value = prop.chartData.orderTrend
  orderUserTrend.value = prop.chartData.orderUserTrend
})

//横向柱形图  第四个小方块
const getChart = () => {
  return {
    xAxis: {
      max: 100,
      min: 0,
      show: false
    },
    yAxis: {
      type: 'category', //Y 轴均匀分布
      show: false
    },
    series: {   // 柱形图
      type: 'bar',
      barWidth: '10',
      data: [33],
      backgroundStyle: { // 柱条的背景颜色设置
        color: '#ccc'
      },
      showBackground: true, //设置柱条的背景颜色,需要变为真
      itemStyle: {
        color: "yellowgreen"
      },
      label: {  // 显示数值
        show: true,  //false 不显示  true 显示
        position: "right",  //显示的位置 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
        color: 'yellowgreen',  //数值的颜色
        formatter: "|",
      },

    },
  }
}

//柱形图的配置   第三个小方块
const getOrderUserTrend = () => {
  return {
    xAxis: {
      type: 'category', //X 轴均匀分布
      show: false
    },
    yAxis: {
      show: false
    },
    series: {   // 柱形图
      type: 'bar',
      colorBy: 'data',   //随机柱形图颜色
      data: orderUserTrend.value,
      label: {  // 显示数值
        show: false,  //false 不显示  true 显示
        position: "insideTop",  //显示的位置 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
        color: 'red'  //数值的颜色
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      show: true,
    },
    tooltip: { // 提示组件
      trigger: 'axis', //触发类型 item 散点图和饼图等无轴的图表 axis 柱形图和折线图等有轴的图表   none 无什么都不触发
      axisPointer: { //提示器的类型
        type: 'cross',  //十字'line' 直线指示器'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。
      },
      //提示框的位置
      posotion: function (point, params, dom, rect, size) {
        // 固定在顶部
        return [point[0], '5%']
      }
    }

  }
}

//折线图的配置对象  第二个小方块的配置
const getLineChart = () => {
  return {
    xAxis: {   //x轴
      type: 'category',   //X轴均分
      show: false,        //隐藏X轴
      boundaryGap: false   //X轴两边不留白
    },
    yAxis: {   //Y轴
      show: false,        //隐藏X轴
    },
    lineStyle: {  //修改线的样式
      color: 'pink'
    },
    series: {  //系列
      type: 'line',    //折现
      data: arrData.value,     //数据
      smooth: true,      //平滑曲线
      itemStyle: {  //拐角透明度为零
        opacity: 0,
      },
      areaStyle: { //区域填充
        color: { //线性渐变
          type: 'linear',
          x: 0,      // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'red'   //0%处的颜色
          }, {
            offset: 1, color: 'pink'
          }],
          global: false   //缺省为 false  为true的话 没有渐变
        }
      },
    },
    grid: { //调整图形的布局  
      left: 0,   //上下左右为0 是没有距离边缘没有距离
      top: 0,
      right: 0,
      bottom: 0,
      show: true,   // 是否显示直角坐标系网格
      backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'yellow'
          },
          {
            offset: 1,
            color: 'yellowgreen'
          }
        ]
      }
    }
  }
}


</script>

<style scoped>

</style>